<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

let router = useRouter()

const ruleFormRef = ref()

const validateUsername = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('账号不能为空，请填写账号'))
  } else if(value.length < 6 || value.length > 18) {
    callback(new Error('账号长度在6~18位之间，请重新输入'))
  } else {
    callback()
  }
}
const validatePassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('密码不能为空，请填写密码'))
  } else if(value.length < 6 || value.length > 18) {
    callback(new Error('密码长度在6~18位之间，请重新输入'))
  } else {
    callback()
  }
}

// 登录表单
const ruleForm = reactive({
  username: '',
  password: ''
})
// 数据验证规则
const rules = reactive({
  username: [{ validator: validateUsername, trigger: 'blur' }],
  password: [{ validator: validatePassword, trigger: 'blur' }],
})

const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      if(ruleForm.username == "manager" && ruleForm.password == "123456") {
        // 登录成功，跳转到首页（路由）
        router.push('/home/settings')
        ElMessage({
          message: '管理员账号登录成功.',
          type: 'success',
          offset: 40
        })
      } else {
        ElMessage({
          message: '账号或者密码有误，请重新输入.',
          type: 'error',
          grouping: true
        })
      }
    } else {
      console.log('error submit!')
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<template>
  <div class="login-box">
    <el-card style="max-width: 480px">
      <template #header>
        <div class="card-header">
          <span>云端中国城 管理员登录</span>
        </div>
      </template>
      <!-- 账号、密码表单 -->
      <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules"
        label-width="auto" class="demo-ruleForm">
        <!-- 账号 -->
        <el-form-item label="账号：" prop="username">
          <el-input v-model="ruleForm.username" autocomplete="off" placeholder="请输入账号" />
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码：" prop="password">
          <el-input v-model="ruleForm.password" type="password" autocomplete="off" placeholder="请输入密码" />
        </el-form-item>
       
        <el-form-item id="btn-grout">
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            登录
          </el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<style scoped>
.login-box {
  background-image: url('../assets/laptop_cup_glasses_114948_2560x1440.jpg');
  background-size: cover;
  /* background-color: aquamarine; */
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-card {
  width: 500px;
  height: 300px;
  background-color: white;
}
.el-form{
  padding: 20px 40px; /*  上下20px内边距；左右40px内边距 */
}
#btn-grout{
  width: 100%;
  display: flex;
  justify-content: end !important;
}

</style>
